Add Summary Field For Grouping

Author
Robbie Cheng, Engineer, Potix Corporation

Date
May 27, 2008

Version
Applicable to zk-3.1.0-FL-2008-05-27 and later.

Live Demo

Let's take a look at a real case, a mail application which groups those mails whose received date are the same as a group in a Listbox, and an additonal summary fied.

Introduction

In previous two articles, this and this, we've introduced you how to use grouping with Listbox or Grid, and how to use live data with grouping. In this smalltalk, I will introduce you how to use two new components Groupfoot and ListGroupfoot to add a summary field for each group while using grouping with Listbox or Grid.

Add Summary Field to Listbox

The following sketch is a Listbox example,

  ...
    <listbox fixedLayout="true">
  <listhead sizable="true">
    <listheader width="150px" label="From" sort="auto" />
    <listheader label="Subject" sort="auto" />
    <listheader width="150px" label="Received" sort="auto" />
    <listheader width="50px" label="Size" sort="auto" />
  </listhead>
  <listgroup>
    <listcell label="Date:Today [From]" />
    <listcell label="[Subject]" />
    <listcell label="[Received]" />
    <listcell label="[Size]" />
  </listgroup>
  <listitem forEach="" forEachBegin="0" forEachEnd="9">
    <listcell label="" image="img/mail_read.png"
      sclass="mailitem" />
    <listcell label="" />
    <listcell label="" />
    <listcell label="" />
  </listitem>
  <listgroupfoot>
      <listcell label="10 emails" sclass="mailitem" />
      <listcell label="zk1" />
      <listcell label="2008/4/29" />
      <listcell label="128KB" />
    </listgroupfoot>
  <listgroup label="Date:Yesterday" />
  <listitem forEach="" forEachBegin="10" forEachEnd="14">
    <listcell label="" image="img/mail_read.png"
      sclass="mailitem" />
    <listcell label="" />
    <listcell label="" />
    <listcell label="" />
  </listitem>
  <listgroupfoot>
      <listcell label="5 emails" sclass="mailitem" />
      <listcell label="zk1" />
      <listcell label="2008/4/28" />
      <listcell label="68KB" />
    </listgroupfoot>
  <listgroup label="Date:Sunday" />
  <listitem forEach="" forEachBegin="15" forEachEnd="20">
    <listcell label="" image="img/mail_read.png"
      sclass="mailitem" />
    <listcell label="" />
    <listcell label="" />
    <listcell label="" />
  </listitem>  
  <listgroupfoot>
      <listcell label="5 emails" sclass="mailitem" />
      <listcell label="zk1" />
      <listcell label="2008/4/27" />
      <listcell label="68KB" />
    </listgroupfoot>
</listbox>
  ...

• Listgroupfoot: It's a kind of Listitem.

Add Summary Field to Grid

Note: This demo code can be found in the war file, but we don't prepare the demo code of Group with Grid inside the war file, if you are still interested, you can copy the following code and run it.

...
  <grid fixedLayout="true">
        <columns sizable="true">
          <column width="200px" label="From"/>
          <column label="Subject"/>
          <column width="150px" label="Received"/>
          <column width="50px" label="Size"/>
        </columns>
        <rows>
          <group>
            <label value="Date:Today [From]"/>
            <label value="[Subject]"/>
            <label value="[Received]"/>
            <label value="[Size]"/>
          </group>
          <row forEach="" forEachBegin="0" forEachEnd="9">
            <div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value=""/></div>
            <label value=""/>
            <label value=""/>
            <label value=""/>
          </row>
          <groupfoot>
             <label value="10 emails"/>
             <label value="zk1"/>
             <label value="2008/4/29"/>
             <label value="128KB"/>
          </groupfoot>
          <group label="Date:Yesterday" />
          <row forEach="" forEachBegin="10" forEachEnd="14">
            <div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value=""/></div>
            <label value=""/>
            <label value=""/>
            <label value=""/>
          </row>
          <groupfoot>
            <label value="5 emails"/>
            <label value="zk1"/>
            <label value="2008/4/28"/>
            <label value="68KB"/>
          </groupfoot>
          <group label="Date:Sunday" />
          <row forEach="" forEachBegin="15" forEachEnd="20">
            <div><image style="padding: 0px 10px" src="img/mail_read.png"/><label value=""/></div>
            <label value=""/>
            <label value=""/>
            <label value=""/>
          </row>
          <groupfoot>
            lt;label value="5 emails"/>
            lt;label value="zk1"/>
            lt;label value="2008/4/27"/>
            lt;label value="68KB"/>
          </groupfoot>
        </rows>
</grid>
...

• Groupfoot: It's a kind of Row.

Download

Download the groupfoot-demo.war for the article here.

Summary

Since ZK 3.1.0, you can add the summary field of each group for Listbox and, Grid with ease. If you come up with any problem, please feel free to ask us on ZK forum.

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.